Server Componentsの直感的理解

Reactって要するに仮想DOMで宣言的にやって、よしなにDOMに反映してくれる君

仮想DOMって要するにJSのオブジェクト

型としてはReact.ReactNode

こんなふうに書けたら、書きやすい

code:TS

async function UserData() {

const data = await fetchUsername()

return <div>user: {data.username}</div>

}

クライアント上でじゃなくて、サーバ上でこれができたら良いよね

そのためには、出来上がったReactNodeをネットワーク経由でブラウザに送るために、シリアライズできる必要がある

それを実際に実現したもの

なので、仮想DOMをシリアライズしようとしたときに自然と想起される問題点を抑えておけばRSCの理解ができる

たとえばコールバック渡すのは無理だろとか

ここらへんをPOSTDの記事は解説してくれてる

モジュール参照とかを理解すれば、クライアントコンポーネントの子にサーバコンポーネントを渡せるとかもわかる

また、ReactNodeを事前に構築して転送する、という挙動を考えれば

この問題なども、答えが同時であることは予想しやすい

そして、転送の際に、UserItemの関数自体を渡すのは自然ではない

それはeval的になってしまう

なので、UserItemを含むファイルmoduleへの参照としてシリアライズしないといけない

だから、RSCの仕組みを実現するためには、バンドラレベルで介入が要るのだ

さて、ReactNode等をシリアライズして転送することを考えると、RSCの仕組み上、RPC的な構造を内部に持つことになるはず

だから、RSCをやろうとすると、その副産物としてServer Actionsが揃ってしまう

そもそも、関数コンポーネントのレンダリングってのは単なる関数呼び出しである